<template>
  <div app-container>
    <el-row type="flex" justify="center">
      <el-col :span="20">
        <div align="center" style="background-color: lightgray;height: 60px;">
          <div>
            <span id="mainTitle">第一步：配置产品信息</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="mb8" justify="center" type="flex">
      <el-col :span="20">
        <div v-for="(one, index) in allData" :key="index" v-model="activeNames" @change="handleChange">
          <el-descriptions :title="one.title" name="1" size="medium" :column="3" >
            <!-- <template slot="title">
              <p class="title">{{ one.title }}</p>
            </template> -->
            <el-descriptions-item v-for="(oneone, index1) in one.viewDetails" :key="index1" :label="oneone.fieldName">
              <div v-if="oneone.fieldType != 'pictrue'">
                <span v-text="oneone.value"></span>
              </div>
              <div v-else-if="oneone.fieldType == 'pictrue'">
                <el-image
                  style="width: auto; height: auto"
                  src="@views/production/collaborativeProduct/1561390725417.jpeg"
                />
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import viewDetails from '@/api/viewDetails'

export default {
  name: 'prostep',
  data() {
    return {
      allData: [
        {
          title: '个人信息',
          data: []
        }
      ],
      activeNames: ['1']
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      viewDetails(4).then(res => {
        console.log(res)
        this.allData = res.data
        console.log(this.allData)
      }).catch()
    },
    handleChange(val) {
      console.log(val)
      console.log(this.allData)
    }
  }
}
</script>
<style>
body>.el-container {
  margin-bottom: 40px;
  display: inline-block;
}

#mainTitle{
  font-size: 30px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  float: left;
  height: 60px;
  margin-top: 10px;
}

/* 调整整个名字和输入框占的盒子大小 */
#context {
  /* float: left; */
  /* width: 20%;  */
  /* margin-left: 50px; */
}

/* .long {
  width: 1050px;
  /* margin-left: 50px; */
/* }  */

/* .short {
  /* float: left; */
  /* width: 450px; */
  /* margin-left: 50px; */
/* }  */

 .title {
  font-size: 30px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #303133;
  background-color: aqua;
}
.con{
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bolder;
  color: #303133;
}
.my-label {
    background: yellow;
  }
</style>
